<template>
  <div class="myTrumpet">
    <top-bar :title="'我的小号'"/>
    <div class="instruction">
      <span>{{ instruction }}</span>
      <div @click="open('instruction')">?</div>
    </div>
    <div class="scroll">
      <div class="content">
          <div :class="[item.is_default === 2 ? 'userName' : 'myTrumpetName']" v-for="(item,key1) in trumpetList"
               :key="item.id">
            <span>
              <span v-if="item.edit === false">{{ item.nick_name }}
                <span v-if="item.is_default === 2" style="color: #FF6565;">(当前登录)</span>
              </span>
              <span v-show="item.edit">
                <input style="line-height: 0.54rem;" type="text" @input="changeName(item,key1)" v-model="item.nick_name" :ref="'nick_name_'+key1"
                       autofocus="autofocus">
              </span>
              <span v-if="item.edit === false" class="edit_button" style="float: right"
                    @click="edit_change(item,key1)">编辑</span>
              <span v-else style="float: right">
                <span @click="edit_nickname(item,false)" class="edit_button edit_cancel">取消</span>
                <span @click="edit_nickname(item,true)" class="edit_button">确认</span>
              </span>
            </span>
          </div>
      </div>
      <div class="submit" @click="open('add')">
        <button>添加小号</button>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body='false'
      :visible.sync="dialogVisible"
      :showClose="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="dialog"
    >
      <div v-if="status">
        <h1>添加小号</h1>
        <el-input v-model="nickname" @input="changeName(null)" placeholder="名称不能超过8个字符"></el-input>
        <div class="buttons">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </div>
      </div>
      <div v-if="!status">
        <h1 class="about">关于小号</h1>
        <div class="instruction-content">
          <span>1.同一游戏每个账号下最多可添加10个小号添加后不可删除</span>
          <span>2.小号等同于游戏子账号，互相之间数据独立</span>
        </div>
        <button class="instruction-button" @click="dialogVisible=false">我知道了</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from './topBar'
import * as api from '../../api'

export default {
  name: 'myTrumpet',
  components: {
    topBar
  },
  computed: {
    trumpetList () {
      for (let i in this.$store.state.accountList.list) {
        this.$store.state.accountList.list[i]['edit'] = false
        this.$store.state.accountList.list[i]['nick_name'] = this.$store.state.accountList.list[i]['nickname']
      }
      return this.$store.state.accountList.list
    }
  },
  data () {
    return {
      instruction: '最多可添加10个小号，不可删除',
      dialogVisible: false,
      nickname: '',
      status: true,
    }
  },
  methods: {
    open (val) {
      this.dialogVisible = true
      if (val == 'instruction') {
        this.status = false
      } else {
        this.status = true
      }
    },
    changeName: function (item,key) {
      if(item !== null){
        this.$refs['nick_name_'+key][0].value = item.nick_name.substr(0, 8)
        item.nick_name = item.nick_name.substr(0, 8)
      }else{
        this.nickname = this.nickname.substr(0, 8)
      }
    },
    edit_nickname (item, l) {
      if (l === false) {
        item.nick_name = item.nickname
      } else {
        if (item.nick_name === '' || item.nick_name.length > 8) {
          this.Toast('小号名称不能为空且长度小于8位。', 500)
          return false
        }
        if(item.nick_name !== item.nickname){
          //编辑昵称提交
          api.editAccount({nickname: item.nick_name, mg_mem_id: item.mg_mem_id}, succ => {
            this.$store.dispatch('getAccountList')
            this.Toast('编辑成功')
          }, fail => {
            this.$store.dispatch('getAccountList')
            this.Toast(fail)
          })
        }
      }
      item.edit = false
      this.$forceUpdate()
    },
    edit_change (item, key) {
      for (let k in this.trumpetList) {
        this.trumpetList[k]['edit'] = false
        this.trumpetList[k]['nick_name'] = this.trumpetList[k]['nickname']
      }
      item.edit = true
      this.$forceUpdate()
      this.$nextTick(() => {
        this.$refs[`nick_name_` + key][0].focus()
      })
    },
    change (itemId) {
      this.$store.dispatch('switchAccount', itemId)
      this.$store.dispatch('getAccountList')
    },
    // 取消
    cancel () {
      this.dialogVisible = false
      this.nickname = ''
    },
    // 确认
    confirm () {
      if (this.nickname == '' || this.nickname.length > 8) {
        this.Toast('小号名称不能为空且长度小于8位。', 500)
        return false
      }  else if (this.trumpetList.length >= 10) {
        this.Toast('添加的小号数已达上限', 500)
      } else {
        api.addAccount(this.nickname, succ => {
          this.dialogVisible = false
          this.nickname = ''
          this.$store.dispatch('getAccountList')
          this.Toast('恭喜~ 小号添加成功')
        }, fail => {
          this.Toast(fail)
        })
      }
    }
  },
  created () {
    // 获取小号列表
    this.$store.dispatch('getAccountList')
  }
}
</script>

<style lang="scss" scoped>
.myTrumpet {
  padding: 0.75rem 0.48rem;

  .instruction {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.59rem;
    margin-top: 0.75rem;

    span {
      display: block;
      font-size: 0.32rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #999999;
      margin-right: 0.21rem;
    }

    div {
      width: 0.37rem;
      height: 0.37rem;
      border-radius: 50%;
      background: #FFAF3D;
      font-size: 0.2rem;
      color: #FFFFFF;
      text-align: center;
      padding-top: 0.02rem;
      line-height: 0.37rem;
    }
  }

  .scroll {
    height: 7rem;
    overflow: scroll;
  }

  .content {
    .userName, .myTrumpetName {
      width: 100%;
      background: #FFF3EC;
      border-radius: 0.21rem;
      font-size: 0.32rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #363739;
      padding: 0.46rem 0.4rem 0.4rem 0.4rem;
      margin-bottom: 0.37rem;
      line-height: 0.54rem;

      input {
        background: #FFF3EC;
        border: 0;
      }
    }

    .myTrumpetName {
      background: rgba(255, 255, 255, 0.6);

      input {
        background: rgba(255, 255, 255, 0.6);
      }
    }

    .trumpet > div:last-child {
      margin-bottom: 0;
    }

    .info-card {
      margin-bottom: 0;
    }

    .edit_button {
      width: 1.39rem;
      height: 0.54rem;
      border-radius: 0.33rem;
      font-size: 0.30rem;
      font-weight: 400;
      text-align: center;
      line-height: 0.54rem;
      background: #FF0000;
      color: #FFFFFF;
      display: inline-block;
    }

    .edit_cancel {
      background: #F5F5F5;
      color: #333333;
    }
  }

  .submit {
    padding: 0 0.45rem;
    margin-bottom: 0.4rem;

    button {
      margin-top: 0.91rem;
      width: 8.13rem;
      height: 1.2rem;
      background: #FF751A linear-gradient(90deg, #FF0000 0%, #FFD500 100%);
      border-radius: 0.67rem;
      font-size: 0.45rem;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #FFFFFF;
    }
  }

  .dialog {
    /deep/ .el-dialog {
      width: 7.44rem;
      height: 5rem;
      background: #FFFFFF;
      border-radius: 0.21rem;
      margin: 0;
      margin-left: 1.28rem;
      margin-bottom: 4.67rem;

      h1 {
        font-size: 0.37rem;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #181818;
        margin-bottom: 1rem;
        text-align: center;
      }

      .about {
        margin-bottom: 0.4rem !important;
      }

      .instruction-content {
        display: flex;
        flex-direction: column;

        > span {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
          line-height: 0.53rem;
        }

        > span:nth-child(1) {
          margin-bottom: 0.37rem;
        }
      }

      .instruction-button {
        margin-top: 0.48rem;
        width: 6.61rem;
        height: 0.85rem;
        background: #FF0300;
        border-radius: 0.53rem;
        font-size: 0.37rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }

      /deep/ .el-input__inner {
        height: 1rem;
        border: none;
        border-bottom: 1px solid #E8E8E8;
      }

      .buttons {
        margin-top: 0.77rem;
        margin-bottom: 0.32rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // text-align: center;
        > button {
          width: 3.09rem;
          height: 0.85rem;
          border-radius: 0.53rem;
          font-size: 0.37rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }

        > button:nth-child(1) {
          background: #F5F5F5;
          color: #333333;
        }

        > button:nth-child(2) {
          background: #FF0300;
          color: #FFFFFF;
        }
      }
    }

    /deep/ .el-dialog__header {
      padding: 0;
    }

    /deep/ .el-dialog__body {
      padding: 0.51rem 0.32rem 0 0.32rem;
    }
  }

  /deep/ .el-dialog__wrapper {
    top: auto;
  }
}
</style>
